import style from "../assets/css/detail.module.css";
import Pingjia from "./pingjia";
import {
  Image,
  Button,
  Tag,
  Tabs,
  Badge,
  Ellipsis,
  Rate,
  CapsuleTabs,
} from "antd-mobile/2x";
import { useState, useEffect } from "react";
import {
  SearchOutline,
  LeftOutline,
  DownlandOutline,
  TravelOutline,
  DownOutline,
  CheckShieldOutline,
  StopOutline,
  RightOutline,
} from "antd-mobile-icons";
import { useHistory } from "react-router-dom";

import axios from "axios";

const Detail = (props) => {
  // 得到history对象
  const history = useHistory();

  const demoSrc = "https://fakeimg.pl/250x100/ededed/333";

  const demoSrc2 = "https://fakeimg.pl/130x260/efefef/";

  const content =
    "《金铲铲之战》是英雄联盟云顶之弈正版授权的自动战斗品类手游，每局比赛由八名玩家共同进行一场各自为战的博弈对抗，玩家通过招兵买马，融合英雄，提升战力，排兵布阵，成为最终立于战场上的赢家。";

  const [hotApp, setHotApp] = useState([]);
  const [hotGame, setHotGame] = useState([]);

  // 获取hotApp
  useEffect(async () => {
    const _hotApp = await axios.post(
      "http://8.136.85.238:3001/api/getAllhotApp"
    );
    // console.log(_hotApp.data.data);
    setHotApp(_hotApp.data.data);
  }, []);

  // 获取hotGame
  useEffect(async () => {
    const _hotGame = await axios.post(
      "http://8.136.85.238:3001/api/getAllhotGame"
    );
    // console.log(_hotGame.data.data);
    setHotGame(_hotGame.data.data);
  }, []);

  return (
    <div className={style.main}>
      <div className={style.top}>
        <div
          onClick={() => {
            props.history.goBack(-1);
          }}
        >
          {/* 返回 */}
          <LeftOutline fontSize={24} color="#333" />
        </div>
        <div>
          {/* 搜索 */}
          <SearchOutline
            fontSize={24}
            color="#333"
            style={{ marginRight: "10px" }}
          />
          {/* 下载 */}
          <DownlandOutline
            fontSize={24}
            color="#333"
            style={{ marginRight: "10px" }}
          />
          {/* 分享 */}
          <TravelOutline
            fontSize={24}
            color="#333"
            style={{ marginRight: "10px" }}
          />
        </div>
      </div>

      <div className={style.body}>
        {/* app名字 */}
        <div className={style.appPhoto}>
          <Image
            src={"https://pp.myapp.com/ma_icon/0/icon_54152245_1636475778/96"}
            width={80}
            height={80}
            fit="cover"
            style={{ borderRadius: 20, marginRight: 10 }}
          ></Image>
          <div className={style.appName}>
            <div className={style.Name}>
              金铲铲之战
              <Button size="mini" color="primary" style={{ marginLeft: 10 }}>
                官方
              </Button>
            </div>
            <div className={style.Intro}>爱奇艺爱奇艺爱奇艺爱奇艺</div>
            <div className={style.Tag}>
              <Tag
                color="#e5fef1"
                style={{ color: "#30ac69", "--border-radius": "20px" }}
              >
                浏览器
              </Tag>
              <Tag
                color="#fdfee0"
                style={{
                  color: "#f96600",
                  "--border-radius": "20px",
                  marginLeft: 10,
                }}
              >
                手机浏览器
              </Tag>
            </div>
          </div>
        </div>

        {/* 评分下载量 */}
        <div className={style.appScore}>
          <div className={style.Ascore}>
            <div className={style.pf}>4.1</div>
            <div className={style.pfrs}>4114人评分</div>
          </div>
          <div className={style.Acount}>
            <div className={style.sl}>194万</div>
            <div className={style.xzl}>下载量</div>
          </div>
        </div>

        {/* 详情 评价 */}
        <div className={style.Acount}>
          <Tabs style={{ width: "100%", marginTop: 10 }}>
            <Tabs.Tab title="详情" key="fruits">
              {/* 图片展示 */}
              <div className={style.images}>
                <Image
                  className={style.image}
                  src={
                    "https://pp.myapp.com/ma_pic2/0/shot_54152245_1_1636475775/550"
                  }
                  fit="cover"
                  style={{ borderRadius: 20, marginRight: 12 }}
                ></Image>
                <Image
                  className={style.image}
                  src={
                    "https://pp.myapp.com/ma_pic2/0/shot_54152245_2_1636475775/550"
                  }
                  fit="cover"
                  style={{ borderRadius: 20, marginRight: 12 }}
                ></Image>
                <Image
                  className={style.image}
                  src={
                    "https://pp.myapp.com/ma_pic2/0/shot_54152245_3_1636475775/550"
                  }
                  fit="cover"
                  style={{ borderRadius: 20, marginRight: 12 }}
                ></Image>
                <Image
                  className={style.image}
                  src={
                    "https://pp.myapp.com/ma_pic2/0/shot_54152245_4_1636475775/550"
                  }
                  fit="cover"
                  style={{ borderRadius: 20, marginRight: 12 }}
                ></Image>
              </div>

              {/* 软件介绍 */}
              <div className={style.rjjs}>
                <div className={style.rjjsbt}>
                  <div className={style.bt}>软件介绍</div>
                  <div className={style.bbh}>版本号V1.2.5</div>
                </div>
                <div className={style.text}>
                  <Ellipsis
                    direction="end"
                    content={content}
                    style={{ flex: 1 }}
                    expandText="展开"
                    collapseText="收起"
                  />
                </div>
                <div className={style.yyz}>运营者:上海纳原信息技术有限公司</div>
                <div className={style.kfz}>运营者:上海纳原信息技术有限公司</div>

                <div className={style.youdian}>
                  <div>
                    <CheckShieldOutline />
                    无病毒
                  </div>
                  <div>
                    <StopOutline />
                    无广告
                  </div>
                  <div>
                    <DownlandOutline />
                    腾讯下载
                  </div>
                </div>

                <div className={style.updata}>
                  <div>2021-10-30更新</div>
                  <div style={{ color: "#0083ff" }}>应用权限</div>
                  <div style={{ color: "#0083ff" }}>隐私政策</div>
                </div>
              </div>

              {/* 热门应用 */}
              <div style={{ marginTop: "10px" }}>
                <div className={style.hotApply}>
                  <div className={style.hotApplybt}>热门应用</div>
                  <div
                    style={{
                      "--font-size": "30px",
                    }}
                    onClick={() => {
                      history.push({ pathname: "SE" });
                    }}
                  >
                    全部
                    <RightOutline />
                  </div>
                </div>
                <div className={style.hotApp}>
                  {hotApp.map((item, index) => (
                    <div key={index} className={style.App}>
                      <img src={item.cover}></img>
                      <div className={style.AppName}>{item.name}</div>
                      <div
                        className={style.way}
                        onClick={() => {
                          history.go(0);
                        }}
                      >
                        {item.downWay}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* 类似应用 */}

              <div
                style={{
                  marginTop: "10px",
                }}
              >
                <div className={style.hotGame}>
                  <div className={style.hotGamebt}>热门游戏</div>
                  <div
                    style={{
                      "--font-size": "30px",
                    }}
                    onClick={() => {
                      history.push({ pathname: "Game" });
                    }}
                  >
                    全部
                    <RightOutline />
                  </div>
                </div>
                <div className={style.hotGame}>
                  {hotGame.map((item, index) => (
                    <div key={index} className={style.Game}>
                      <img src={item.cover}></img>
                      <div className={style.GameName}>{item.name}</div>
                      <div
                        className={style.way}
                        onClick={() => {
                          history.push({ pathname: "Detail" });
                        }}
                      >
                        {item.downWay}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </Tabs.Tab>

            <Tabs.Tab
              title={
                <Badge
                  content="999+"
                  color="#fff"
                  style={{ "--right": "-10px", color: "#999" }}
                >
                  评价
                </Badge>
              }
              key="vegetables"
            >
              <div className={style.star}>
                <Image
                  src={
                    "https://portrait.gitee.com/uploads/avatars/user/3259/9778472_ren-yaqi_1632450006.png!avatar30"
                  }
                  width={46}
                  height={46}
                  fit="cover"
                  style={{ borderRadius: 32 }}
                />
                <div>安装成功后，可发表评论</div>
                <Rate allowHalf defaultValue={2.5} />
              </div>
              <h3>用户评价</h3>
              <CapsuleTabs
                className={style.CapsuleTabs}
                style={{ "--adm-border-color": "#fff" }}
              >
                <CapsuleTabs.Tab title="全部" key="fruits" />
                <CapsuleTabs.Tab title="最新" key="vegetables" />
                <CapsuleTabs.Tab title="好评" key="animals" />
                <CapsuleTabs.Tab title="中评" key="middle" />
                <CapsuleTabs.Tab title="差评" key="bad" />
              </CapsuleTabs>
              <Pingjia />
              <Pingjia />
              <Pingjia />
              <Pingjia />
              <Pingjia />
            </Tabs.Tab>
          </Tabs>
        </div>
      </div>

      <div className={style.foot}>
        <Button block shape="rounded" color="primary" size="large">
          免流下载
        </Button>
      </div>
    </div>
  );
};

export default Detail;
